<template>
    <view class="account-management">

        <!-- 内容区域 -->
        <view class="content">
            <!-- 手机号信息 -->
            <view class="info-item">
                <text class="label">手机号</text>
                <view class="value-wrapper">
                    <text class="value">{{ userInfo.phone }}</text>
                </view>
                <view class="value-wrapper" @click="navigateTo('/pages/personalCenter/account/modifyPhone')">
                    <text class="modify-btn">修改</text>
                    <image class="right-details-icon" src="/static/personalCenter/details.png" mode="aspectFill">
                    </image>
                </view>
            </view>

            <!-- 其他账号信息可以根据需要添加 -->
            <!-- <view class="info-item">
        <text class="label">密码</text>
        <view class="value-wrapper">
          <text class="value">********</text>
          <text class="modify-btn" @click="modifyPassword">修改</text>
        </view>
      </view> -->
        </view>

    </view>
</template>
<script>
export default {
    data() {
        return {
            userInfo: null
        }
    },
    onShow(options) {
        this.userInfo = uni.getStorageSync('userInfo')
        
	},
    methods: {
        // 
        // 导航到指定页面
        navigateTo(url) {
            uni.navigateTo({
                url: url,
            });
        },
    }
}
</script>
<style>
.account-management {
    /* padding: 0 30rpx; */
    background-color: #f5f5f5;
    /* min-height: 100vh; */
    margin-top: 20rpx;

}


.content {
    background-color: #fff;
    padding: 46rpx 44rpx 66rpx 40rpx;
}

.info-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* padding: 30rpx 0; */
    /* border-bottom: 1rpx solid #f5f5f5; */
}

.info-item:last-child {
    border-bottom: none;
}

.label {
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: 500;
    font-size: 32rpx;
    color: #0B1F20;
    line-height: 48rpx;
}

.value-wrapper {
    display: flex;
    align-items: center;
}

.value {
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: 400;
    font-size: 32rpx;
    color: #0B1F20;
    line-height: 48rpx;
}

.modify-btn {
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: 400;
    font-size: 24rpx;
    color: #999999;
    line-height: 36rpx;
}

.right-details-icon {
    width: 28rpx;
    height: 28rpx;
}

/* 弹窗样式覆盖 */
.uni-popup-dialog {
    width: 80%;
}

.uni-popup-dialog .uni-popup__input {
    margin-top: 20rpx;
    padding: 20rpx;
    border: 1rpx solid #eee;
    border-radius: 8rpx;
}
</style>